<script>
import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
import config from './config.js';
import {checkFlightInformation, queryPortInformation} from "@/api/mall";
import { oneWayList } from './boatTicketList.js';

export default {
  name: "list",
  mixins: [ZPMixin],
  data() {
    return {
      oneWayList,
      startCities: [],
      endCities: [],
      // 路由传参
      fromPortId: '',
      toPortId: '',
      selectedDate: '',

      // 当前选中的港口信息
      fromCity: '',
      toCity: '',
      
      // 日期选择相关
      currentDateIndex: 0,
      dateList: [],
      
      // 船票列表
      tickets: [],
      
      // 当前展开的船票ID（手风琴模式，只展开一个）
      activeTicketId: null,
            
      // 是否在切换城市
      isSwapping: false,
      
      // 日期选择器范围
      datePickerStart: '',
      datePickerEnd: '',
      
      // 节流控制
      throttleTimer: null
    }
  },
  async onLoad(options) {
    console.log(options)
    const { from, to, date } = options;
    // 获取路由参数
    this.fromPortId = from;
    this.toPortId = to;
    this.selectedDate = date || this.getFormattedDate(new Date());
    
    this.setCities();
    
    // 根据港口ID设置城市名称和索引
    this.setPortInfo();
    
    // 生成日期列表（今天和未来6天）
    this.generateDateList();
    
    // 设置日期选择器范围
    const today = new Date();
    this.datePickerStart = this.getFormattedDate(today);
    
    // 设置结束日期为15天后
    const endLimit = new Date();
    endLimit.setDate(endLimit.getDate() + 15);
    this.datePickerEnd = this.getFormattedDate(endLimit);
    
    // 设置导航栏标题
    this.setNavigationTitle();
  },
  computed:{
    safeAreaTop(){
      return this.$store.state.app.wxMenuClient ? this.$store.state.app.wxMenuClient.top : 0;
    },
  },
  watch: {
    '$i18n.locale'() {
      // 监听语言变化，重新设置导航栏标题并重新生成日期列表
      this.setNavigationTitle();
      this.generateDateList();
    }
  },
  
  methods: {
    setCities() {
      this.startCities = this.oneWayList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
      const find = this.oneWayList.find(item => item.PortID == this.fromPortId);
      this.endCities = find.ArrivePortList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
    },
    // 设置导航栏标题
    setNavigationTitle() {
      uni.setNavigationBarTitle({
        title: this.$t('ticket.list.title', '船票列表')
      });
    },
    
    // 根据港口ID设置港口信息
    setPortInfo() {
      this.fromCity = this.startCities.find(item => item.PortID === this.fromPortId).PortCName;
      this.toCity = this.endCities.find(item => item.PortID === this.toPortId).PortCName;
    },
    
    // 生成日期列表
    generateDateList() {
      const today = new Date();
      this.dateList = [];
      
      for (let i = 0; i < 7; i++) {
        const date = new Date();
        date.setDate(today.getDate() + i);
        
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const weekdays = [
          this.$t('common.weekdays.sunday'),
          this.$t('common.weekdays.monday'),
          this.$t('common.weekdays.tuesday'),
          this.$t('common.weekdays.wednesday'),
          this.$t('common.weekdays.thursday'),
          this.$t('common.weekdays.friday'),
          this.$t('common.weekdays.saturday')
        ];
        const weekday = weekdays[date.getDay()];
        
        let label = '';
        if (i === 0) {
          label = this.$t('common.today');
        } else if (i === 1) {
          label = this.$t('common.tomorrow');
        } else if (i === 2) {
          label = this.$t('common.dayAfterTomorrow');
        } else {
          label = weekday;
        }
        
        this.dateList.push({
          date: this.getFormattedDate(date),
          month: month,
          day: day < 10 ? '0' + day : day,
          label: label,
          weekday: weekday
        });
      }
    },
    
    // 获取格式化的日期字符串 YYYY-MM-DD
    getFormattedDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 选择日期
    selectDate(index) {
      this.currentDateIndex = index;
      this.selectedDate = this.dateList[index].date;
      // 重新加载船票列表
      this.$refs.paging.reload();
    },
    
    // 打开日历选择器
    openCalendar() {
      uni.showToast({
        title: '打开日历选择器',
        icon: 'none'
      });
    },
    
    // 日期变更处理
    onDateChange(date) {
      this.selectedDate = date;
      
      // 找到对应的日期索引并更新
      const index = this.dateList.findIndex(item => item.date === date);
      if (index !== -1) {
        this.currentDateIndex = index;
      }
      
      // 重新加载船票列表
      this.$refs.paging.reload();
    },
    
    // 改变日期（往前或往后）带节流
    navigateDate(direction) {
      // 如果节流定时器存在，说明操作太频繁，直接返回
      if (this.throttleTimer) {
        return;
      }
      
      // 设置1秒的节流定时器
      this.throttleTimer = setTimeout(() => {
        this.throttleTimer = null;
      }, 1000);
      
      // direction: -1表示前一天，1表示后一天
      const currentDate = new Date(this.selectedDate);
      currentDate.setDate(currentDate.getDate() + direction);
      
      // 检查是否在允许的日期范围内
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      if (direction < 0 && currentDate < today) {
        // 不能选择今天之前的日期
        uni.showToast({
          title: this.$t('ticket.list.cannotSelectPastDate'),
          icon: 'none'
        });
        return;
      }
      
      const maxDate = new Date(this.datePickerEnd);
      if (direction > 0 && currentDate > maxDate) {
        // 不能选择超过最大限制的日期
        uni.showToast({
          title: this.$t('ticket.list.dateOutOfRange'),
          icon: 'none'
        });
        return;
      }
      
      // 更新选中的日期
      this.selectedDate = this.getFormattedDate(currentDate);
      
      // 找到对应的日期索引并更新
      const index = this.dateList.findIndex(item => item.date === this.selectedDate);
      if (index !== -1) {
        this.currentDateIndex = index;
      }
      
      // 重新加载船票列表
      this.$refs.paging.reload();
    },
    
    // 切换船票展开/折叠状态（手风琴模式）
    toggleTicketExpand(ticketId, ticket) {
      if (ticket.totalSeats === '0') return;

      // 如果点击当前已展开的，则关闭它
      if (this.activeTicketId === ticketId) {
        this.activeTicketId = null;
      } else {
        // 否则切换到新点击的船票
        this.activeTicketId = ticketId;
      }
    },
    
    // 加载船票列表
    queryList(pageNo, pageSize) {
      // 如果有港口ID，调用真实接口
      if (this.fromPortId && this.toPortId) {
        checkFlightInformation({
          StartPortId: this.fromPortId,
          ArrivePortId: this.toPortId,
          DepartDate: this.selectedDate,
        }).then(res => {
          // 处理接口返回的数据
          const rawTickets = res.Data || [];
          const tickets = this.transformTicketData(rawTickets);
          this.$refs.paging.complete(tickets);
        }).catch(error => {
          console.error('获取船票信息失败:', error);
          this.$refs.paging.complete([]);
        });
      } else {
        // 使用config中的默认数据
        setTimeout(() => {
          const tickets = config.getTickets(this.selectedDate, this.fromCity, this.toCity);
          this.$refs.paging.complete(tickets);
        }, 500);
      }
    },
    
    // 转换接口数据为页面展示格式
    transformTicketData(rawTickets) {
      return rawTickets.map(ticket => {
        // 计算出发和到达时间
        const departureTime = ticket.DepartTime || '';
        let arrivalTime = ticket.ArrivalTime || '';
        
        // 如果没有到达时间，根据出发时间和班次分钟数计算
        if (!arrivalTime && ticket.ClassMinute) {
          const [hours, minutes] = departureTime.split(':');
          const departMinutes = parseInt(hours) * 60 + parseInt(minutes);
          const arrivalMinutes = departMinutes + parseInt(ticket.ClassMinute);
          const arrivalHours = Math.floor(arrivalMinutes / 60);
          const arrivalMins = arrivalMinutes % 60;
          arrivalTime = `${String(arrivalHours).padStart(2, '0')}:${String(arrivalMins).padStart(2, '0')}`;
        }
        
        // 获取舱位信息，只保留有QP票价的舱位
        const cabins = (ticket.CabinList || []).map(cabin => {
          const qpPrice = (cabin.PriceList || []).find(p => p.TicketTypeCode === 'QP');
          return qpPrice ? {
            ...cabin,
            QPPrice: qpPrice.TicketPrice,
            QPTicket: qpPrice
          } : null;
        }).filter(Boolean);
        
        // 统计各舱位座位数和价格
        let regularSeats = 0, vipSeats = 0, luxurySeats = 0;
        let regularPrice = null, vipPrice = null, luxuryPrice = null;
        cabins.forEach(cabin => {
          if (cabin.CabinCode === 'PTC') {
            regularSeats = cabin.SeatCount || 0;
            regularPrice = cabin.QPPrice;
          } else if (cabin.CabinCode === 'TDC') {
            vipSeats = cabin.SeatCount || 0;
            vipPrice = cabin.QPPrice;
          } else if (cabin.CabinCode === 'GBC') {
            luxurySeats = cabin.SeatCount || 0;
            luxuryPrice = cabin.QPPrice;
          }
        });
        // 页面主价优先普通舱，其次头等舱，再次贵宾舱
        let minPrice = regularPrice ?? vipPrice ?? luxuryPrice ?? 0;
        return {
          id: ticket.ClassID,
          classNo: ticket.ClassNo,
          departureTime: departureTime,
          arrivalTime: arrivalTime,
          departurePlace: ticket.StartPortName || this.fromCity,
          arrivalPlace: ticket.ArrivePortName || this.toCity,
          duration: ticket.ClassMinute ? `${ticket.ClassMinute}${this.$t('ticket.list.minutes')}` : `50${this.$t('ticket.list.minutes')}`,
          shipName: ticket.ShipName || this.$t('ticket.list.newHaizhu'),
          price: minPrice,
          totalSeats: ticket.SeatCount || 0,
          regularSeats: regularSeats,
          vipSeats: vipSeats,
          luxurySeats: luxurySeats,
          regularPrice,
          vipPrice,
          luxuryPrice,
          cabinList: cabins, // 只包含有QP票价的舱位
          rawData: ticket // 保存原始数据
        };
      });
    },
    
    // 预订船票
    bookTicket(ticket, event, seatType) {
      // 阻止事件冒泡，避免触发折叠面板
      event.stopPropagation();
      // 获取对应座位类型的座位数
      let seatCount = 0;
      let cabinInfo = null;
      // 根据座位类型找到对应的舱位信息
      if (ticket.cabinList) {
        for (let cabin of ticket.cabinList) {
          if ((seatType === 'regular' && cabin.CabinCode === 'PTC') ||
              (seatType === 'vip' && cabin.CabinCode === 'TDC') ||
              (seatType === 'luxury' && cabin.CabinCode === 'GBC')) {
            seatCount = cabin.SeatCount || 0;
            cabinInfo = cabin;
            break;
          }
        }
      } else {
        // 兼容旧数据格式
        if (seatType === 'regular') {
          seatCount = ticket.regularSeats || 0;
        } else if (seatType === 'vip') {
          seatCount = ticket.vipSeats || 0;
        } else if (seatType === 'luxury') {
          seatCount = ticket.luxurySeats || 0;
        }
      }
      // 如果座位数为0，则提示无法预订
      if (seatCount <= 0) {
        uni.showToast({
          title: this.$t('ticket.list.seatSoldOut'),
          icon: 'none'
        });
        return;
      }
      // 构建预订参数，补全所有航班和座位信息
      const bookingParams = {
        departureId: ticket.id,
        classNo: ticket.classNo,
        departureTime: ticket.departureTime,
        arrivalTime: ticket.arrivalTime,
        duration: ticket.duration,
        shipName: ticket.shipName,
        seatType: seatType,
        cabinId: cabinInfo ? cabinInfo.CabinID : '',
        cabinCode: cabinInfo ? cabinInfo.CabinCode : '',
        from: this.fromCity,
        to: this.toCity,
        departureDate: this.selectedDate,
        orderType: '0', // 单程
        startPortId: this.fromPortId,
        arrivePortId: this.toPortId
      };
      console.log(bookingParams);
      
      const paramStr = Object.keys(bookingParams).map(key => `${key}=${encodeURIComponent(bookingParams[key])}`).join('&');
      uni.navigateTo({
        url: `/ticket_subpages/index/predetermined?${paramStr}`
      });
    },
    
    // 交换出发地和目的地
    swapCities() {
      // 先判断出发地列表是否有当前目的地
      const startFind = this.startCities.find(item => item.PortID === this.toPortId);
      if (!startFind) {
        uni.showToast({
          title: `暂不支持出发地${this.toCity}至${this.fromCity}购票`,
          icon: 'none'
        })
        return;
      }
      // 出发地可修改为目的地的情况下，判断修改后出发地的目的地是否是原始出发地
      const tempId = this.toPortId;
      const tempFind = this.oneWayList.find(item => item.PortID == tempId);
      const tempEndCities = tempFind.ArrivePortList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
      const endFind = tempEndCities.find(item => item.PortID === this.fromPortId);
      if (!endFind) {
        uni.showToast({
          title: `暂不支持出发地${this.toCity}至${this.fromCity}购票`,
          icon: 'none'
        })
        return;
      }

      if (this.isSwapping) return;

      this.isSwapping = true;

      setTimeout(() => {
        this.endCities = tempEndCities;
        this.toPortId = this.fromPortId;
        this.toCity = this.endCities.find(item => item.PortID === this.toPortId).PortCName;
        this.fromPortId = tempId;
        this.fromCity = this.startCities.find(item => item.PortID === this.fromPortId).PortCName;
        this.isSwapping = false;
        this.$refs.paging.reload();
      }, 300)
    },
    
    // 获取格式化的日期显示
    getFormattedDateDisplay(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      
      // 判断日期是今天、明天还是后天
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      const tomorrow = new Date(today);
      tomorrow.setDate(tomorrow.getDate() + 1);
      
      const afterTomorrow = new Date(today);
      afterTomorrow.setDate(afterTomorrow.getDate() + 2);
      
      date.setHours(0, 0, 0, 0);
      
      let dateText = '';
      if (date.getTime() === today.getTime()) {
        dateText = this.$t('common.today');
      } else if (date.getTime() === tomorrow.getTime()) {
        dateText = this.$t('common.tomorrow');
      } else if (date.getTime() === afterTomorrow.getTime()) {
        dateText = this.$t('common.dayAfterTomorrow');
      } else {
        const weekdays = [
          this.$t('common.weekdays.sunday'),
          this.$t('common.weekdays.monday'),
          this.$t('common.weekdays.tuesday'),
          this.$t('common.weekdays.wednesday'),
          this.$t('common.weekdays.thursday'),
          this.$t('common.weekdays.friday'),
          this.$t('common.weekdays.saturday')
        ];
        dateText = weekdays[date.getDay()];
      }
      
      return `${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${dateText}`;
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 获取指定舱位的票价
    getTicketPrice(ticket, seatType) {
      if (!ticket.cabinList) return ticket.price;
      switch(seatType) {
        case 'regular': return ticket.regularPrice ?? '--';
        case 'vip': return ticket.vipPrice ?? '--';
        case 'luxury': return ticket.luxuryPrice ?? '--';
        default: return ticket.price;
      }
    }
  }
}
</script>

<template>
  <view class="list-container">
    <z-paging ref="paging" v-model="tickets" @query="queryList" refresher-enabled>
      <!-- 顶部固定内容 -->
      <template #top>
        <!-- 顶部导航栏 -->
        <view class="header" :style="{paddingTop: safeAreaTop + 'px'}">
          <view class="nav-bar">
            <view class="back-btn" @click="goBack">
              <image src="/static/home/right-arrow-black.png"></image>
            </view>
            
            <!-- 路线选择 - 替换原来的page-title -->
            <view class="nav-route-selection">
              <!-- 出发城市选择 -->
              <text class="city">{{ fromCity }}</text>
              
              <!-- 方向箭头 -->
              <view class="direction-arrow" :class="{'rotating': isSwapping}" @click="swapCities">
                <text class="arrow-icon">→</text>
              </view>
              
              <!-- 目的地城市选择 -->
              <text class="city">{{ toCity }}</text>
            </view>
            
            <view class="right-icons"></view>
          </view>
          
          <!-- 日期选择 -->
          <view class="date-selection">
            <view class="date-navigator">
              <view class="nav-button prev-day" @click="navigateDate(-1)">
                <text>{{$t('ticket.list.prevDay')}}</text>
              </view>
              
              <uni-datetime-picker
                type="date"
                v-model="selectedDate"
                :start="datePickerStart"
                :end="datePickerEnd"
                @change="onDateChange"
                :clear-icon="false"
              >
                <view class="current-date">
                  <text>{{getFormattedDateDisplay(selectedDate)}}</text>
<!--                  <view class="date-arrow"></view>-->
                </view>
              </uni-datetime-picker>
              
              <view class="nav-button next-day" @click="navigateDate(1)">
                <text>{{$t('ticket.list.nextDay')}}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
      
      <!-- 船票列表 -->
      <view class="ticket-list">
        <view 
          v-for="ticket in tickets" 
          :key="ticket.id"
          class="ticket-item"
          :class="ticket.totalSeats === '0' ? 'ticket-item__no_seat' : ''"
          @click="toggleTicketExpand(ticket.id, ticket)"
        >
          <!-- 主要信息行 -->
          <view class="main-info-row">
            <!-- 船票时间和地点信息 -->
            <view class="ticket-time-info">
              <!-- 出发信息 -->
              <view class="departure">
                <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.departureTime}}</text>
                <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.departurePlace}}</text>
              </view>
              
              <!-- 路线信息 -->
              <view class="route-info">
                <text class="duration">{{ticket.duration}}</text>
                <image
                  src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
                  mode="aspectFit"
                  class="ship-icon"
                  :class="{'ship-icon__no_seat': ticket.totalSeats === '0'}"
                 />
                <text class="ship-name">{{ticket.shipName || $t('ticket.list.newHaizhu')}}</text>
              </view>
              
              <!-- 到达信息 -->
              <view class="arrival">
                <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalTime}}</text>
                <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalPlace}}</text>
              </view>
            </view>
            
            <!-- 价格和折叠箭头 -->
            <view v-if="ticket.totalSeats !== '0'" class="ticket-right">
              <!-- 价格 -->
              <view class="price-container">
                <view class="price">
                  <text class="price-symbol">¥</text>
                  <text class="price-value">{{ticket.price}}</text>
                </view>
                <text class="total-seats">{{$t('ticket.list.totalTickets', {count: ticket.totalSeats})}}</text>
              </view>
              <!-- 折叠指示箭头 -->
              <view class="expand-arrow" :class="{'expanded': activeTicketId === ticket.id}">
                <view class="arrow"></view>
              </view>
            </view>
            <view v-else class="ticket-right__no_seat">
              <view class="no-seat">
                <text>已售罄</text>
              </view>
            </view>
          </view>
          
          <!-- 座位信息条 -->
          <view v-if="ticket.totalSeats !== '0'" class="seat-capacity-row">
            <view class="seat-type-item">
              <image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616113955.png" class="seat-icon"></image>
              <text class="seat-type">{{$t('ticket.list.economyClass')}}:</text>
              <text class="seat-number">{{ticket.regularSeats}}张</text>
            </view>
            <view class="seat-type-item">
              <image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616177090.png" class="seat-icon seat-icon-head"></image>
              <text class="seat-type">{{$t('ticket.list.businessClass')}}:</text>
              <text class="seat-number">{{ticket.vipSeats}}张</text>
            </view>
            <view class="seat-type-item">
              <image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616229121.png" class="seat-icon seat-icon-luxury"></image>
              <text class="seat-type">{{$t('ticket.list.firstClass')}}:</text>
              <text class="seat-number">{{ticket.luxurySeats}}张</text>
            </view>
          </view>
          
          <!-- 展开的详细信息 -->
          <view class="ticket-detail-wrapper">
            <view class="ticket-detail" :class="{'expanded': activeTicketId === ticket.id}">
              <view class="seat-types">
                <view class="seat-type-item">
                  <text class="seat-name">{{$t('ticket.list.economyClass')}}</text>
                  <text class="seat-price">¥{{getTicketPrice(ticket, 'regular')}}</text>
                  <text class="seat-count">{{ticket.regularSeats}}张</text>
                  <view 
                    class="seat-book-btn" 
                    :class="{'disabled': ticket.regularSeats <= 0}"
                    @click.stop="bookTicket(ticket, $event, 'regular')"
                  >
                    <text>{{$t('ticket.list.book')}}</text>
                  </view>
                </view>
                
                <view class="seat-type-item">
                  <text class="seat-name">{{$t('ticket.list.businessClass')}}</text>
                  <text class="seat-price">¥{{getTicketPrice(ticket, 'vip')}}</text>
                  <text class="seat-count">{{ticket.vipSeats}}张</text>
                  <view 
                    class="seat-book-btn" 
                    :class="{'disabled': ticket.vipSeats <= 0}"
                    @click.stop="bookTicket(ticket, $event, 'vip')"
                  >
                    <text>{{$t('ticket.list.book')}}</text>
                  </view>
                </view>
                
                <view class="seat-type-item">
                  <text class="seat-name">{{$t('ticket.list.firstClass')}}</text>
                  <text class="seat-price">¥{{getTicketPrice(ticket, 'luxury')}}</text>
                  <text class="seat-count">{{ticket.luxurySeats}}张</text>
                  <view 
                    class="seat-book-btn" 
                    :class="{'disabled': ticket.luxurySeats <= 0}"
                    @click.stop="bookTicket(ticket, $event, 'luxury')"
                  >
                    <text>{{$t('ticket.list.book')}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style scoped lang="scss">
.list-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  background-color: #e0f7ff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 44px;

  .back-btn {
    width: 30rpx;

    image {
      transform: rotate(180deg);
      width: 13rpx;
      height: 24rpx;
    }
  }
  
  .nav-route-selection {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .city {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
    
    .direction-arrow {
      margin: 0 30rpx;
      color: #00a0e9;
      transition: transform 0.3s;
      
      &.rotating {
        transform: rotate(180deg);
      }
      
      .arrow-icon {
        font-size: 36rpx;
      }
    }
  }
  
  .right-icons {
    display: flex;
    width: 60rpx;
    height: 60rpx;
    
    .icon-more, .icon-scan {
      font-family: "iconfont";
      font-size: 40rpx;
      margin-left: 30rpx;
      color: #333;
    }
  }
}

/* 路线选择 */
.route-selection {
  display: none;
}

/* 日期选择 */
.date-selection {
  width: 100%;
  display: flex;
  align-items: stretch;
  background-color: #e0f7ff;
  border-bottom: 1px solid #d0eeff;
}

.date-navigator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20rpx;
  
  .nav-button {
    padding: 10rpx 20rpx;
    color: #666;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    
    &.prev-day:before {
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-left: 2rpx solid #666;
      border-bottom: 2rpx solid #666;
      transform: rotate(45deg);
      margin-right: 10rpx;
    }
    
    &.next-day:after {
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      border-right: 2rpx solid #666;
      border-top: 2rpx solid #666;
      transform: rotate(45deg);
      margin-left: 10rpx;
    }
  }
  
  .current-date {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    height: 70rpx;
    padding: 0 20rpx;

    
    .date-arrow {
      width: 24rpx;
      height: 24rpx;
      margin-left: 10rpx;
      border-bottom: 2rpx solid #666;
      border-right: 2rpx solid #666;
      transform: rotate(45deg) translateY(-4rpx);
    }
  }
}

/* 船票列表 */
.ticket-list {
  padding: 20rpx;
}

.ticket-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  &__no_seat {
    background-color: #f2f2f2;
  }
  
  .main-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10rpx;
  }
  
  .ticket-time-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    max-width: 70%;
    margin-bottom: 15rpx;
    
    .departure, .arrival {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120rpx;
      
      .time {
        font-size: 34rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        &__no_seat {
          color: #9b9b9b;
          font-weight: normal;
        }
      }
      
      .place {
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        &__no_seat {
          color: #9b9b9b;
          font-weight: normal;
        }
      }
    }
    
    .route-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 15rpx;
      margin-bottom: 15rpx;
      
      .ship-icon {
        width: 180rpx;
        height: 18rpx;
        &__no_seat {
          filter: grayscale(100%);
        }
      }
      
      .duration {
        font-size: 22rpx;
        color: #999;
      }
      .ship-name {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
  
  .ticket-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 30%;
    .price-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .price {
        display: flex;
        align-items: baseline;
        .price-symbol {
          font-size: 26rpx;
          color: #ff5233;
        }
        .price-value {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff5233;
        }
      }
      .total-seats {
        font-size: 22rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }
    .expand-arrow {
      width: 36rpx;
      height: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 12rpx;
      transition: all 0.3s;
      
      .arrow {
        width: 14rpx;
        height: 14rpx;
        border-right: 2rpx solid #999;
        border-bottom: 2rpx solid #999;
        transform: rotate(45deg);
        transition: all 0.3s;
      }
      
      &.expanded .arrow {
        transform: rotate(-135deg);
      }
    }
  }
  .ticket-right__no_seat {
    height: 100%;
    .no-seat {
      height: 100%;
      display: flex;
      align-items: center;
      color: #9b9b9b;
      text {
        font-size: 28rpx;
      }
    }
  }
}

.ticket-detail-wrapper {
  width: 100%;
  clear: both;
  overflow: hidden;
  
  .ticket-detail {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-10rpx);
    
    &.expanded {
      max-height: 500rpx; /* 足够大的值以容纳内容 */
      opacity: 1;
      transform: translateY(0);
      border-top: 1px dashed #eee;
      padding-top: 15rpx;
    }
    
    .seat-types {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
}

.seat-type-item {
  width: 100%;
  padding: 12rpx 15rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  
  &:last-child {
    border-bottom: none;
  }
  
  .seat-name {
    font-size: 24rpx;
    color: #333;
    flex: 1;
  }
  
  .seat-price {
    font-size: 30rpx;
    font-weight: bold;
    color: #ff5233;
    flex: 1;
    text-align: center;
  }
  
  .seat-count {
    font-size: 22rpx;
    color: #999;
    flex: 1;
    text-align: center;
  }
  
  .seat-book-btn {
    width: 110rpx;
    height: 56rpx;
    background-image: linear-gradient(180deg, #FA452D 0%, #FA822D 100%);
    border-radius: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.disabled {
      background-image: none;
      background-color: #cccccc;
    }
    
    text {
      color: #fff;
      font-size: 24rpx;
    }
  }
}

/* 座位信息条 */
.seat-capacity-row {
  width: 100%;
  display: flex;
  padding: 6rpx 10rpx;
  clear: both;
  
  .seat-type-item {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    
    .seat-icon {
      width: 22rpx;
      height: 22rpx;
      color: #999;
      margin-right: 4rpx;
    }
    
    .seat-icon-head {
      color: #498FFF;
    }
    
    .seat-icon-luxury {
      color: #ff5233;
    }
    
    .seat-type {
      font-size: 22rpx;
      color: #666;
    }
    
    .seat-number {
      font-size: 22rpx;
      color: #498FFF;
      font-weight: 500;
    }
  }
}
</style>